<script setup>
import { onMounted, ref } from 'vue'
import timeSvg from '@/assets/icons/auditSVG/timeAudit.svg'
import calendaSvg from '@/assets/icons/auditSVG/calendaAudit.svg'
import computerSvg from '@/assets/icons/auditSVG/computerAudit.svg'
import doorSvg from '@/assets/icons/auditSVG/doorAudit.svg'
import suitcaseSvg from '@/assets/icons/auditSVG/suitcaseAudit.svg'
import jingyingSvg from '@/assets/icons/auditSVG/jingyingSvg.svg'
import feijingyingSvg from '@/assets/icons/auditSVG/feijingyingSvg.svg'
import beiyongjinSvg from '@/assets/icons/auditSVG/beiyongjinSvg.svg'
import yewuzhaodaiSvg from '@/assets/icons/auditSVG/yewuzhaodaiSvg.svg'
import caigoushenqingSvg from '@/assets/icons/auditSVG/caigoushenqingSvg.svg'
import huopindizhangSvg from '@/assets/icons/auditSVG/huopindizhangSvg.svg'
import xiangmuzijinSvg from '@/assets/icons/auditSVG/xiangmuzijinSvg.svg'
import ruzhishenqingSvg from '@/assets/icons/auditSVG/ruzhishenqingSvg.svg'
import zhuanzhengSvg from '@/assets/icons/auditSVG/zhuanzhengSvg.svg'
import shigangSvg from '@/assets/icons/auditSVG/shigangSvg.svg'
import lizhiSvg from '@/assets/icons/auditSVG/lizhiSvg.svg'
import wupinSvg from '@/assets/icons/auditSVG/wupinSvg.svg'
import yongzhangSvg from '@/assets/icons/auditSVG/yongzhangSvg.svg'
import weixiuSvg from '@/assets/icons/auditSVG/weixiuSvg.svg'
import yongcheSvg from '@/assets/icons/auditSVG/yongcheSvg.svg'
import hetongSvg from '@/assets/icons/auditSVG/hetongSvg.svg'
import gudingSvg from '@/assets/icons/auditSVG/gudingSvg.svg'
import huiyishiSvg from '@/assets/icons/auditSVG/huiyishiSvg.svg'
import linshigongSvg from '@/assets/icons/auditSVG/linshigongSvg.svg'
import peixunhuiyiSvg from '@/assets/icons/auditSVG/peixunhuiyiSvg.svg'
import gongwenSvg from '@/assets/icons/auditSVG/gongwenSvg.svg'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const activeButton = ref(0)
const activeText = ref('全部')
const handleButtonGroupClick = (index, title) => {
  activeButton.value = index
  activeText.value = title
}

const listData = ref([])

const tabbarData = ref([
  // 考勤
  [
    {
      typeList: '假勤',
      children: [
        {
          url: timeSvg,
          title: '补卡',
          txt: '发起补卡申请，每月 4 次',
          ruleId: 'buka',
        },
        {
          url: calendaSvg,
          title: '请假',
          txt: '发起各类请假、调休申请',
          ruleId: 'qingjia',
        },
        {
          url: computerSvg,
          title: '加班',
          txt: '发起加班申请',
          ruleId: 'jiaban',
        },
        {
          url: doorSvg,
          title: '外出',
          txt: '发起外出申请',
          ruleId: 'waichu',
        },
        {
          url: suitcaseSvg,
          title: '出差',
          txt: '国内出差申请',
          ruleId: 'chuchai',
        },
      ],
    },
  ],
  // 财务
  [
    {
      typeList: '财务',
      children: [
        {
          url: jingyingSvg,
          title: '经营性付款申请',
          txt: '日常经营活动中，需要对外支付款项',
          ruleId: 'jingying',
        },
        {
          url: feijingyingSvg,
          title: '非经营性付款申请',
          txt: '非日常经营活动中，需要对外支付款项',
          ruleId: 'feijingying',
        },
        {
          url: beiyongjinSvg,
          title: '备用金申请',
          txt: '根据实际需要发起备用金申请',
          ruleId: 'beiyongjin',
        },
        {
          url: beiyongjinSvg,
          title: '文旅运营申请',
          txt: '根据实际需要发起文旅运营申请',
          ruleId: 'wenlvzhuanxiang',
        },
        {
          url: yewuzhaodaiSvg,
          title: '业务招待报备申请',
          txt: '发起业务招待报备申请',
          ruleId: 'yewu',
        },
        {
          url: caigoushenqingSvg,
          title: '采购申请',
          txt: '发起采购申请',
          ruleId: 'caigou',
        },
        {
          url: huopindizhangSvg,
          title: '货品抵账申请',
          txt: '发起货品抵账申请',
          ruleId: 'huopin',
        },
        {
          url: xiangmuzijinSvg,
          title: '项目资金众筹申请',
          txt: '发起项目资金众筹申请',
          ruleId: 'xiangmuzijin',
        },
      ],
    },
  ],
  // 人事
  [
    {
      typeList: '人事',
      children: [
        {
          url: ruzhishenqingSvg,
          title: '入职申请',
          txt: '发起入职申请',
          ruleId: 'ruzhi',
        },
        {
          url: zhuanzhengSvg,
          title: '转正申请',
          txt: '发起转正申请',
          ruleId: 'zhuanzheng',
        },
        {
          url: shigangSvg,
          title: '试岗报备',
          txt: '发起试岗报备',
          ruleId: 'shigang',
        },
        {
          url: lizhiSvg,
          title: '离职',
          txt: '发起离职',
          ruleId: 'lizhi',
        },
      ],
    },
  ],
  // 行政
  [
    {
      typeList: '行政',
      children: [
        {
          url: wupinSvg,
          title: '物品领用申请',
          txt: '发起物品领用申请',
          ruleId: 'wupin',
        },
        {
          url: yongzhangSvg,
          title: '用章用印申请',
          txt: '发起用章用印申请',
          ruleId: 'yongzhang',
        },
        {
          url: weixiuSvg,
          title: '维修申请',
          txt: '发起维修申请',
          ruleId: 'weixiu',
        },
        {
          url: yongcheSvg,
          title: '用车申请',
          txt: '发起用车申请',
          ruleId: 'yongche',
        },
        {
          url: hetongSvg,
          title: '合同流转',
          txt: '发起合同流转',
          ruleId: 'hetongliuzhuan',
        },
        {
          url: gudingSvg,
          title: '固定资产报废申请',
          txt: '发起固定资产报废申请',
          ruleId: 'gudingzichanbaofei',
        },
        {
          url: huiyishiSvg,
          title: '会议室预订',
          txt: '发起会议室预订',
          ruleId: 'huiyishi',
        },
        {
          url: gongwenSvg,
          title: '公文流转',
          txt: '发起公文流转',
          ruleId: 'gongwenliuzhuan',
        },
      ],
    },
  ],
  // 其他
  [
    {
      typeList: '其他',
      children: [
        {
          url: linshigongSvg,
          title: '临时工人申请',
          txt: '发起临时工人申请',
          ruleId: 'linshigong',
        },
        {
          url: peixunhuiyiSvg,
          title: '培训会议请假单',
          txt: '发起培训会议请假单',
          ruleId: 'peixunhuiyiqingjia',
        },
      ],
    },
  ],
])

const handleEdit = (cardItem) => {
  router.push({
    path: '/approval/approvalDesign',
    query: {
      ruleId: cardItem.ruleId,
      title: cardItem.title,
    },
  })
}

const search = ref('')
const isSearching = ref(false)
onMounted(async () => {
  // listData.value = (await approvalList()).rows
  // console.log(listData.value)
})
</script>

<template>
  <div class="container">
    <div class="pageTitle">审批流程管理</div>
    <div class="buttonGroup">
      <div>
        <el-button
          :class="activeButton === 0 ? 'activeButton' : ''"
          @click="handleButtonGroupClick(0, '全部')"
          >全部
        </el-button>
        <el-button
          :class="activeButton === 1 ? 'activeButton' : ''"
          @click="handleButtonGroupClick(1, '假勤')"
          >假勤
        </el-button>
        <el-button
          :class="activeButton === 2 ? 'activeButton' : ''"
          @click="handleButtonGroupClick(2, '财务')"
          >财务
        </el-button>
        <el-button
          :class="activeButton === 3 ? 'activeButton' : ''"
          @click="handleButtonGroupClick(3, '人事')"
          >人事
        </el-button>
        <el-button
          :class="activeButton === 4 ? 'activeButton' : ''"
          @click="handleButtonGroupClick(4, '行政')"
          >行政
        </el-button>
        <el-button
          :class="activeButton === 5 ? 'activeButton' : ''"
          @click="handleButtonGroupClick(5, '其他')"
          >其他
        </el-button>
      </div>
      <el-input v-model="search" :prefix-icon="Search" placeholder="搜索" style="width: 240px" />
    </div>
    <!--    列表-->
    <div v-if="search.length === 0">
      <div
        v-for="item in tabbarData.filter(
          (item1, index) => item1[0].typeList === activeText || activeText === '全部',
        )"
        class="list-container"
      >
        <div class="title">
          {{ item[0].typeList }}
        </div>
        <div class="card-container">
          <el-card v-for="cardItem in item[0].children" class="card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-image :src="cardItem.url" class="image-class" />
                <span>{{ cardItem.title }}</span>
              </div>
            </template>
            <span class="card-txt">{{ cardItem.txt }}</span>
            <template #footer>
              <div style="display: flex; justify-content: space-between; width: 100%">
                <div id="blank"></div>
                <el-button class="button" type="primary" @click="handleEdit(cardItem)">
                  <el-icon>
                    <Edit />
                  </el-icon>
                  <span class="button-text">编辑</span>
                </el-button>
              </div>
            </template>
          </el-card>
        </div>
      </div>
    </div>
    <!--  搜索结果-->
    <div v-else>
      <div
        v-for="item in tabbarData.filter(
          (item1, index) => item1[0].children.filter((i) => i.title.includes(search)).length > 0,
        )"
        class="list-container"
      >
        <div class="title">
          {{ item[0].typeList }}
        </div>
        <div class="card-container">
          <el-card
            v-for="cardItem in item[0].children.filter((i) => i.title.includes(search))"
            class="card"
            shadow="hover"
          >
            <template #header>
              <div class="card-header">
                <el-image :src="cardItem.url" class="image-class" />
                <span>{{ cardItem.title }}</span>
              </div>
            </template>
            <span class="card-txt">{{ cardItem.txt }}</span>
            <template #footer>
              <div style="display: flex; justify-content: space-between; width: 100%">
                <div id="blank"></div>
                <el-button class="button" type="primary" @click="handleEdit(cardItem)">
                  <el-icon>
                    <Edit />
                  </el-icon>
                  <span class="button-text">编辑</span>
                </el-button>
              </div>
            </template>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  padding: 20px;
}

.buttonGroup {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}

.pageTitle {
  color: #303133;
  font-feature-settings:
    'ss01' on,
    'ss04' on;
  font-family: 'MiSans';
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

.activeButton {
  background-color: #409eff;
  color: #ffffff;
}

.list-container {
  margin-top: 16px;
}

.title {
  flex: 1 0 0;
  color: #303133;
  font-feature-settings:
    'ss01' on,
    'ss04' on;
  font-family: 'MiSans';
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 383px;
  margin: 16px 16px 16px 0;
}

.card-header {
  display: flex;
  align-items: center;
  height: 60px;
  padding-left: 20px;
  color: #303133;
  font-feature-settings:
    'ss01' on,
    'ss04' on;
  font-family: 'MiSans';
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

:deep(.el-card__header) {
  padding: unset !important;
}
:deep(.el-card__body) {
  height: 54px;
}

.card-txt {
  display: block;
  text-wrap: nowrap;
  width: 351px;
  align-self: stretch;
  overflow: hidden;
  color: #606266;
  font-feature-settings:
    'ss01' on,
    'ss04' on;
  text-overflow: ellipsis;
  font-family: 'MiSans';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.image-class {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  padding: 3.13px;
  border-radius: 3.2px;
  background-color: #409eff;
}

.button {
  background-color: #409eff;
  color: #ffffff;
  border: 1px solid #409eff;
  height: 32px;
  width: 82px;
}

.button-text {
  color: #ffffff;
  font-feature-settings:
    'ss01' on,
    'ss04' on;
  font-family: 'MiSans';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
</style>
